<template>
  <div>
    <el-dialog
      :title="dialogInfo.isAdd ? '添加角色' : '编辑角色'"
      :visible.sync="dialogInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="roleForm" :rules="rules" ref="roleInfo">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="rolename"
        >
          <el-input v-model="roleForm.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <!-- 
                el-tree 属性配置
                data	展示数据	array
                props	配置选项，具体看下表
                default-expand-all	是否默认展开所有节点

             -->
          <el-tree
            :data="menuList"
            show-checkbox
            node-key="id"
            default-expand-all
            ref="tree"
            :props="{
              children: 'children',
              label: 'title', //名字
            }"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="roleForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confrim" type="primary">确 定</el-button>
        <!-- <el-button v-if="dialogInfo.isAdd" @click="addInfo" type="primary"
          >添 加</el-button
        >
        <el-button v-else @click="editInfo" type="primary">编 辑</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addRole, getRoleInfo, postEditRole } from "../../util/axios";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      roleForm: {
        rolename: "", //角色名称
        menus: "", //角色权限//菜单权限 存放的是菜单编号，用逗号隔开 '1,2,3'
        status: 1, //状态1正常2禁用
      },
      formLabelWidth: "120px", //label宽度
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapGetters({
      menuList: "menu/getMenuList",
    }),
  },
  props: ["dialogInfo"],
  mounted() {
    //如果用户已经点击了菜单或者说菜单已经有数据，没有必要做数据交互
    if (this.menuList.length == 0) {
      this.getMenuList();
    }
  },
  methods: {
    ...mapActions({
      getRoleList: "role/getRoleListAction",
      getMenuList: "menu/getMenuListAction",
    }),
    //封装一个取消事件
    cancel() {
      this.$emit("cancel", false);
      //调用封装好的重置事件
      this.reset();
    },
    // 封装一个重置事件
    reset() {
      this.roleForm = {
        rolename: "", //角色名称
        menus: "", //角色权限//菜单权限 存放的是菜单编号，用逗号隔开 '[1,2,3]'
        status: 1, //状态1正常2禁用
      };
      //重置规则验证
      this.$refs.roleInfo.resetFields();
      //重置tree结构
      this.$refs.tree.setCheckedKeys([]);
    },
    //封装一个添加接口
    // addInfo() {
    //   this.$refs.roleInfo.validate(valid => {
    //     if (valid) {
    //       // console.log(this.$refs.tree.getCheckedKeys().join(','),'获取属性结构的值');
    //       //根据后端需求，它需要的参数叫menus。要求是'1,2,3'这种状态，我们要根据后端需求，对我们的数据进行格式转化
    //       this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
    //       addRole(this.roleForm).then(res => {
    //         console.log(res, "添加的响应");
    //         if (res.data.code == 200) {
    //           this.$message.success(res.data.msg);
    //           //当添加成要清空弹框并重新调取列表
    //           this.cancel();
    //           this.getRoleList();
    //         } else {
    //           this.$message.error(res.data.msg);
    //         }
    //       });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    //封装一个获取一条数据的方法
    lookup(id) {
      getRoleInfo({
        id,
      }).then((res) => {
        console.log(res, "获取一条角色");
        if (res.data.code == 200) {
          this.roleForm = res.data.list;
          //重新给tree结构赋值
          this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(","));
          this.roleForm.id = id;
        }
      });
    },
    //编辑事件
    // editInfo() {
    //   this.$refs.roleInfo.validate(valid => {
    //     if (valid) {
    //       this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
    //       postEditRole(this.roleForm).then(res => {
    //         if (res.data.code == 200) {
    //           this.$message.success(res.data.msg);
    //           //当添加成要清空弹框并重新调取列表
    //           this.cancel();
    //           this.getRoleList();
    //         } else {
    //           this.$message.error(res.data.msg);
    //         }
    //       });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // }
    confrim() {
      this.$refs.roleInfo.validate((valid) => {
        if (valid) {
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(",");
          if (this.dialogInfo.isAdd) {
            addRole(this.roleForm).then((res) => {
              console.log(res, "添加的响应");
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                //当添加成要清空弹框并重新调取列表
                this.cancel();
                this.getRoleList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          } else {
            postEditRole(this.roleForm).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                //当添加成要清空弹框并重新调取列表
                this.cancel();
                this.getRoleList();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="" scoped></style>
